<template>
    <div>
        <el-table :header-cell-style="headerCellStyle" stripe :data="tableData" v-loading="tableloading">
            <el-table-column label="序号" width="80">
                <template slot-scope="scope">
                    <span v-text="getIndex(scope.$index)"></span>
                </template>
            </el-table-column>
            <el-table-column prop="newsTitle" label="标题" width="360"></el-table-column>
            <el-table-column prop="groupName" label="分组">
                <template slot-scope="scope">
                    {{ scope.row.groupName || '--' }}
                </template>
            </el-table-column>
            <el-table-column prop="createUserName" label="创建人"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <span>{{ ['未编辑', '未发布', '已发布', '待审核', '已驳回'][scope.row.state] }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="operation" label="操作" fixed="right" width="200">
                <template slot-scope="scope">
                    <el-button v-if="[0, 1, 4].includes(scope.row.state) && permissions.cp_news_up" type="text" @click="handleNews(scope.row, 1)">上架</el-button>
                    <el-button v-if="[2].includes(scope.row.state) && permissions.cp_news_down" type="text" @click="handleNews(scope.row, 2)">下架</el-button>
                    <el-button v-if="[3].includes(scope.row.state) && permissions.cp_news_cancel" type="text" @click="handleNews(scope.row, 3)">撤销</el-button>
                    <el-button v-if="[0, 1, 4].includes(scope.row.state) && permissions.cp_news_edit && ![3000, 2000, 1000].includes(parentId)" @click="editFn(scope.row, 1)" type="text"
                        >编辑</el-button
                    >
                    <el-button @click="editFn(scope.row)" type="text">查看</el-button>
                    <el-button v-if="[0, 1, 4].includes(scope.row.state) && ![3000, 2000, 1000].includes(parentId) && permissions.cp_news_del" type="text" @click="handleDel(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <div class="madp-pagination">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="page.current"
                :page-sizes="[10, 20, 30, 50, 100]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import newsApi from '@/api/store/news.js';
export default {
    props: {
        searchT: {
            type: String,
            default: ''
        },
        activeGroupId: {
            type: Number,
            default: 0
        },
        tableType: {
            type: Number,
            default: 0
        },
        parentId: {
            type: Number,
            default: 1000
        }
    },
    data() {
        return {
            // 分页
            page: {
                current: 1,
                size: 10,
                total: 0
            },
            // 表格样式
            headerCellStyle: {
                background: 'rgb(255, 191, 191)',
                color: 'rgb(44,44,44)'
            },
            // loading开关
            tableloading: false,
            // 表格数据
            tableData: []
        };
    },
    computed: {
        ...mapGetters(['permissions'])
    },
    methods: {
        getList(data) {
            if (!data) {
                this.page.current = 1;
            }
            this.tableloading = true;
            let obj = {
                groupId: this.activeGroupId,
                current: this.page.current,
                size: this.page.size,
                newsTitle: this.searchT,
                state: this.tableType,
                sign: [1000, 2000].includes(this.parentId) ? this.parentId / 1000 : 0
            };
            let currentId = this.parentId;
            newsApi
                .getNews(obj)
                .then((res) => {
                    if (res.data.code === 0) {
                        if (currentId != this.parentId) return;
                        this.page.total = res.data.data.total;
                        this.tableData = res.data.data.records;
                    }
                    this.tableloading = false;
                })
                .catch(() => {
                    this.tableloading = false;
                });
        },
        // 分页
        handleSizeChange(val) {
            this.page.size = val;
            this.getList(1);
        },
        handleCurrentChange(val) {
            this.page.current = val;
            this.getList(1);
        },
        // 获取表格序号
        getIndex($index) {
            return (this.page.current - 1) * this.page.size + $index + 1;
        },
        // 编辑 查看
        editFn(data, val) {
            if (val) {
                this.$emit('handleEdit', data);
            } else {
                this.$emit('handleView', data);
            }
        },
        // 上架、下架、撤销
        handleNews(data, val) {
            // 3 撤销、 2 下架、 1 上架
            if ([3, 2].includes(val)) {
                this.$confirm(`是否确定${['下架', '撤销'][val - 2]}该资讯?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        newsApi[['downNews', 'revokeNews'][val - 2]]({
                            newsKey: data.newsKey
                        }).then((res) => {
                            if (res.data.code != 0) return;
                            this.$message({
                                type: 'success',
                                message: ['下架', '撤销'][val - 2] + '成功!'
                            });
                            this.$emit('handleUpdate');
                        });
                    })
                    .catch(() => {});
            } else {
                this.$confirm(`是否确定上架该资讯?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        newsApi
                            .pubNews({
                                newsKey: data.newsKey
                            })
                            .then((res) => {
                                if (res.data.code != 0) return;
                                this.$message({
                                    type: 'success',
                                    message: '上架成功!'
                                });
                                this.$emit('handleUpdate');
                            });
                    })
                    .catch(() => {});
            }
        },
        handleDel(data) {
            this.$confirm(`是否确定删除该资讯?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    newsApi
                        .delNews({
                            newsKey: data.newsKey
                        })
                        .then((res) => {
                            if (res.data.code != 0) return;
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.$emit('handleUpdate', 1);
                        });
                })
                .catch(() => {});
        }
    }
};
</script>
